<template>
	<view class="container">
		<!-- 顶部背景 -->

		<view class="header">
			<view class="back-icon" @tap="goBack">

			</view>
		</view>

		<!-- 头像和标题 -->
		<view class="profile">
			<image class="avatar" :src="shop.logo" />
			<view class="profile-info">
				<text class="username">{{ shop.short_name }}</text>
				<button class="copy-btn" @tap.stop="copy">复制</button>
			</view>
		</view>

		<!-- 商家中心专享 -->
		<view class="exclusive-banner">
			<text class="banner-title">商家中心专享</text>
			<text class="banner-subtitle">解锁所有权限</text>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-list">
			<view class="menu-item" @tap="addApply()">
				<image src="/static/icons/product.png" class="menu-icon" />
				<text class="menu-text">商户进件</text>
				<image class="menu-arrow" src="/static/icons/arrow-right.png"></image>
			</view>
			<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="navigateTo(item.url)">
				<image :src="item.icon" class="menu-icon" />
				<text class="menu-text">{{ item.title }}</text>
				<image class="menu-arrow" src="/static/icons/arrow-right.png"></image>
			</view>


			<view class="menu-item" @tap="addGoods()">
				<image src="/static/icons/product.png" class="menu-icon" />
				<text class="menu-text">发布商品</text>
				<image class="menu-arrow" src="/static/icons/arrow-right.png"></image>
			</view>

			<view class="menu-item" @tap="toprint()">
				<image src="/static/user/tab-8.png" class="menu-icon"></image>
				<text class="menu-text">添加打印机播报器</text>
				<!-- 添加箭头图标 -->
				<image class="menu-arrow" src="/static/user/arrow-icon.png"></image>
			</view>
			<view class="menu-item" @tap="tospeaker()">
				<image src="/static/user/tab-8.png" class="menu-icon"></image>
				<text class="menu-text">添加云音箱</text>
				<!-- 添加箭头图标 -->
				<image class="menu-arrow" src="/static/user/arrow-icon.png"></image>
			</view>
			<view class="menu-item" @tap="chain()" v-if="shop.is_chain_shop==1">
				<image src="/static/user/tab-8.png" class="menu-icon"></image>
				<text class="menu-text">申请连锁</text>
				<!-- 添加箭头图标 -->
				<image class="menu-arrow" src="/static/user/arrow-icon.png"></image>
			</view>
			<view class="menu-item" @tap="chainJoin()" v-if="shop.is_chain_shop==1">
				<image src="/static/user/tab-8.png" class="menu-icon"></image>
				<text class="menu-text">加入连锁</text>
				<!-- 添加箭头图标 -->
				<image class="menu-arrow" src="/static/user/arrow-icon.png"></image>
			</view>
			<view class="menu-item" @tap="chainUser()" v-if="shop.is_chain_shop==1">
				<image src="/static/user/tab-8.png" class="menu-icon"></image>
				<text class="menu-text">收款账号</text>
				<!-- 添加箭头图标 -->
				<image class="menu-arrow" src="/static/user/arrow-icon.png"></image>
			</view>
			<view class="menu-item" @tap="applyalliance()">
				<image src="/static/user/tab-8.png" class="menu-icon"></image>
				<text class="menu-text">申请联盟</text>
				<image class="menu-arrow" src="/static/user/arrow-icon.png"></image>
			</view>
			
			<view class="menu-item" @tap="joinalliance()">
				<image src="/static/user/tab-8.png" class="menu-icon"></image>
				<text class="menu-text">加入联盟</text>
				<image class="menu-arrow" src="/static/user/arrow-icon.png"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import MyHomeSlide from "@/components/MyHomeSlide";
	import api from '@/api/';
	import shop from '@/api/shop.js';
	import user from '@/api/user.js';
	export default {
		data() {
			return {
				menuItems: [{
						icon: '/static/icons/contract.png',
						title: '商家签约查询码',
						url: '/pages/shipment/Qrcode'
					}, {
						icon: '/static/icons/config.png',
						title: '活动配置',
						url: '/pages/my/shop/setting'
					}, {
						icon: '/static/icons/collect.png',
						title: '收款码',
						url: '/pages/my/shop/qrcode'
					},
					{
						icon: '/static/icons/collect.png',
						title: '扫码付',
						url: '/pages/home/scan/scan'
					},
					{
						icon: '/static/icons/edit.png',
						title: '修改资料',
						url: '/pages/my/shop/profile'
					},
					{
						icon: '/static/icons/statistics.png',
						title: '营收统计',
						url: '/pages/my/shop/order'
					},
					{
						icon: '/static/icons/benefit.png',
						title: '商家收益',
						url: '/pages/my/shop/rebate'
					},
					{
						icon: '/static/icons/fans.png',
						title: '商家粉丝',
						url: '/pages/my/shop/fans'
					},
					// {
					// 	icon: '/static/icons/progress.png',
					// 	title: '商户进件',
					// 	url: '/pages/shipment/index'
					// },



					{
						icon: '/static/icons/user.png',
						title: '消费用户',
						url: '/pages/my/shop/users'
					},



					// {
					// 	icon: '/static/icons/product.png',
					// 	title: '发布商品',
					// 	url: '/pages/publish-product/publish-product'
					// }
				],
				slides: [],
				isHome: 'isShop',
				shop: {
					wx_mchid: ''
				},
			}
		},
		components: {
			MyHomeSlide
		},
		onLoad() {
			this.loadIndex();
		},
		methods: {
			toprint() {
				uni.navigateTo({
					url: '/pages/my/shop/wifiprint?spid=' + this.shop.id
				})
			},
			tospeaker() {
				uni.navigateTo({
					url: '/pages/my/shop/speaker?spid=' + this.shop.id
				})
			},
			joinalliance() {
				uni.navigateTo({
					url: '/pages/my/allianceList/allianceList'
				})
			},
			chain() {
				uni.navigateTo({
					url: '/pages/my/shop/chain'
				})
			},
			chainJoin() {
				uni.navigateTo({
					url: '/pages/my/shop/chain_join'
				})
			},
			chainUser() {
				uni.navigateTo({
					url: '/pages/my/shop/chain_user'
				})
			},
			applyalliance() {
				let that = this;
				uni.showModal({
					title: '申请联盟',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入联盟名称', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							if (!res.content) {
								return this.toast('联盟名称不能为空')
							}
							that.changealliance(res.content)
							console.log('输入的内容：', res.content);

						}
					}
				});
			},
			changealliance(alliance_name) {
				user.changealliance({
					alliance_name: alliance_name
				}).then(res => {
					uni.hideLoading();
					// if (res.code === 1) {
					// this.user_level = res.data.user.user_level
					return this.toast(res.msg)
					// }
				})
			},
			// 返回上一页
			goBack() {
				// 这里的代码可以根据使用的框架进行修改
				// 在 uniapp 中，使用 uni.navigateBack()
				uni.navigateBack();
			},
			async copy() {
				uni.setClipboardData({
					data: this.shop.short_name.toString()
				}).then(res => {
					const [error, data] = res;
					if (!error) {
						this.toast('复制成功');
					} else {
						console.error(error);
					}
				});
			},
			navigateTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					});
				}
			},
			addApply() {
				if (this.shop.applyId > 0) {
					uni.navigateTo({
						url: '/pages/shipment/index?id=' + this.shop.applyId
					});
				} else {
					uni.navigateTo({
						url: '/pages/shipment/index'
					});
				}

			},
			addGoods() {
				// #ifdef H5
				location.href = 'https://www.yycjkb.cn/index/user/login.html'
				// #endif

				// #ifdef APP-PLUS

				plus.runtime.openUrl('https://www.yycjkb.cn/index/user/login.html')

				// #endif
			},
			async loadIndex() {
				var type = 'shop';
				api.index({
					type: type
				}).then(res => {
					if (res.code === 1) {
						this.slides = res.data.list;
					} else {
						this.toast(res.msg);
					}
				});

				shop.index().then(res => {
					if (res.code === 1) {
						this.shop = res.data.shop;
					} else {
						this.toast(res.msg);
					}
				});
			},
		}
	
	}
</script>

<style scoped>
	.container {
		padding: 0;
		background-color: #f5f5f5;
	}

	.header {
		background: linear-gradient(180deg, #ff7f00, #ff4d00);
		height: 200rpx;
		position: relative;
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background-image: url('/static/icons/back-arrow.png');
		/* 设置返回箭头图标 */
		background-size: cover;
		cursor: pointer;
		/* 设置鼠标指针为点击样式 */

		image {
			width: 20px;
			height: 20px;
		}
	}

	.profile {
		display: flex;
		flex-direction: column;
		/* 改为垂直排列 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		margin-top: -70rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 5rpx solid #fff;
		margin-bottom: 15rpx;
		/* 头像和用户名之间增加间距 */
	}

	.profile-info {
		display: flex;
		align-items: center;
		/* 水平排列头像、用户名和复制按钮 */
		justify-content: center;
		/* 水平居中 */
	}

	.username {
		font-size: 32rpx;
		color: #333;
		margin-right: 10rpx;
		/* 给用户名和按钮增加间距 */
	}

	.copy-btn {
		background-color: #ff9900;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		width: 55px;
	}

	.exclusive-banner {
		background-color: #333;
		color: #f5b0a0;
		margin: 20rpx;
		border-radius: 15rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.banner-title {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		/* 增加间距 */
	}

	.banner-subtitle {
		font-size: 22rpx;
		color: #999;
	}

	.menu-list {
		background-color: #fff;
		border-radius: 15rpx;
		margin: 20rpx;
		padding: 10rpx 0;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.menu-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.menu-arrow {
		width: 20rpx;
		height: 30rpx;
	}
</style>